﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" href="/manager/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/manager/easyui/themes/icon.css">
    <script type="text/javascript" src="/manager/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/manager/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
	    //工具栏
	    var toolbar = [{
	        text: '修改',
	        iconCls: 'icon-edit',
	        handler: function () {
	            var row = $("#booklist").datagrid("getSelected");
	            if (row == null){
	                $.messager.alert("提示","请选择要修改的用户","info");
                }
                //回显
                $.ajax({
                    url: "/manager/user/findById",
                    data: {id: row.id},
                    dataType: 'json',
                    method: 'get',
                    success:function (res) {
                        if (res.code == 200){
                            $("#modify-id").textbox("setValue",res.data.id);
                            $("#modify-username").textbox("setValue",res.data.username);
                            $("#modify-phone").textbox("setValue",res.data.phone);
                            $("#modify-email").textbox("setValue",res.data.email);
                            $("#modify-interest").textbox("setValue",res.data.interest);
                        }
                    }
                })

	            $('#dd').dialog('open');
	        }
	    }, '-', {
	        text: '启用',
	        iconCls: 'icon-ok',
	        handler: function () {
                var row = $("#booklist").datagrid("getSelected");
                $.ajax({
                    url:"/manager/user/modifyUser",
                    data:{
                        flag: 1,
                        id: row.id
                    },
                    dataType: 'json',
                    method:'get',
                    success: function (res) {
                        if (res.code == 200){
                            alert("修改成功!");
                            $("#booklist").datagrid("reload");
                        }else{
                            alert("修改错误!");
                        }
                    }
                })
	        }
	    }, '-', {
	        text: '禁用',
	        iconCls: 'icon-cancel',
	        handler: function () {
	            var row = $("#booklist").datagrid("getSelected");
	            console.log("1111111");
	            console.log(row.id);
                $.ajax({
                    url:"/manager/user/modifyUser",
                    data:{
                        flag: -1,
                        id: row.id
                    },
                    dataType: 'json',
                    method:'get',
                    success: function (res) {
                        if (res.code == 200){
                            alert("修改成功!");
                            $("#booklist").datagrid("reload");
                        }else{
                            alert("修改错误!");
                        }
                    }
                })

	        }
	    }];
	   $(function(){
	       $('#booklist').datagrid({  
				title:'用户列表',  
				iconCls:'icon-save',   
                url: "/manager/user/findAll",
				columns:[
				    [
					{field:'username',title:'姓名',width:100,align:'center'},
					{field:'phone',title:'电话',width:200,align:'center'},
					{field:'email',title:'eamil',width:80,align:'center'},
					{field:'flag',title:'状态',width:200,align:'center',formatter: function(value,row){
                            if (value ==1){
                                return '启用';
                            }else {
                                return '禁用';
                            }
                        }}
					]
                ],
				toolbar: toolbar,  
				pagination: true,//表示在datagrid设置分页              
               	pageSize: 5,
				singleSelect:true,
                pageList: [5,10,20]
			});

	       // 为什么不行?
		 //初始化查询栏
		 // $("#submit_search").linkbutton({ iconCls: 'icon-search', plain: true })
         //    .click(function () {
         //        var username = $("#username").val();
         //        var flag = $("#flag").val();
         //        // console.log(username);
         //        // console.log(flag);
         //        // $('#dg').datagrid({ queryParams: form2Json("searchform") });   //点击搜索
         //        $('#booklist').datagrid({ queryParams: username, flag });   //点击搜索
         //    });
          
          //初始化修改窗口  
         $('#dd').dialog({
			    title: 'My Dialog',
			    width: 700,
			    height: 500,
			    closed: true,
			    cache: false,
			    href: '',
			    modal: true,
			    iconCls: 'icon-save',
                buttons: [{
                    text:'提交',
                    iconCls:'icon-ok',
                    handler:function(){
                        modifyUser();
                        alert('ok');
                        $("#booklist").datagrid("reload");
                    }
                },{
                    text:'关闭',
                    handler:function(){
                        alert('cancel');;
                    }
                }]
			});
	   });
        function searchUser() {
            var username = $("#username").val();
            var flag = $("#flag").val();
            $('#booklist').datagrid({
                queryParams:{
                    username, flag
                }
            });
        };
        function modifyUser(){
            // 为什么getSelected娶不到？
            // var row = $("#booklist").datagrid("getSelected");
            var param = $("#ff").serializeArray();
            // param.push("id", row.id);
            $.ajax({
                url:"/manager/user/modifyUser",
                data:param,
                dataType: 'json',
                method:'get',
                success: function (res) {
                    if (res.code == 200){
                        alert("修改成功!");
                    }else{
                        alert("修改错误!");
                    }
                    $("#dd").dialog("close");
                }
            })

        }
	</script>
</head>
<body>
   <form name="searchform" method="post" action="" id ="searchform">
    <td width="70" height="30"><strong>用户查询：</strong></td>
    <td height="30">
        <input id="username" type="text" name="keyword" size=20 placeholder="姓名"/>
        <select name="search_type" id="flag" >
            <option value="">请选择状态</option>
            <option value="1" >启用</option>
            <option value="-1">禁用</option>
        </select>
    </td>
	<td>
	  <a id="submit_search" onclick="searchUser()" class="easyui-linkbutton" data-options="iconCls:'icon-search', plain:true">搜索</a>
	</td>
  </form>
  <table id="booklist"></table>
    <div id="dd">
           <div align="center" style="margin-top: 30px">
            <form id="ff" method="post">
                <div style="margin-bottom:20px">
                    <input class="easyui-textbox" id="modify-id" name="id" style="width:50%" data-options="label:'用户id:',required:true">
                </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" id="modify-username" name="username" style="width:50%" data-options="label:'姓名:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" id="modify-phone" name="phone" style="width:50%" data-options="label:'电话:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" id="modify-email" name="email" style="width:50%" data-options="label:'email:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" id="modify-interest" name="interest" style="width:50%;height:60px" data-options="label:'兴趣爱好:',multiline:true">
            </div> 
        </form>
           </div>
    </div>
</body>
</html>